<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<body>
    <!-- <div>
        <div>
            <h1><p><i>1</i></p></h1>
            <h2><p><i><a href="">1</a></i></p></h2>
            <h3><p>1</p></h3>
            <h4><p><i>1</i></p></h4>
        </div>
    </div> -->
    <!-- <div>
        <a href="">1</a>
        <br>
        <span>2</span>
        <lu>
            <li>3</li>
        </lu>
        <strong>4</strong>
        <br>  
        <i>5</i>
    </div> -->
    <style>
        /* ul{
            list-style-type: none;
            display: flex;
            justify-content: center;
        }
        ul li{
            margin-left:20px;
        }
        ul li input{
            font-size: 20px;
            font-weight: bold;
        } */
        div{
            width: 100px;
            height: 100px;
            background-color: aquamarine;
        }
        .active {
            background-color: yellowgreen;
        }
        /* div::after{
            content:'';
            width: 50px;
            height: 50px;
            background-color: #ccc;
            display:inline-block;
        } */
    </style>
    <div >111</div>
    <!-- <ul>
        <li>minutes:<input type="text" value="0"></li>
        <li>seconds:<input type="text" value="0"></li>
    </ul>  -->
    <script>
        var div = document.getElementsByTagName('div')[0];
        div.onclick = function(){
            this.className = 'active';
        }
        // window.getComputedStyle(div,'::after').width;
        // var comsty = window.getComputedStyle(div,null).width;
        // console.log(comsty);
        //计时器
        // var minutesValue = document.getElementsByTagName('input')[0];
        // var secondsValue = document.getElementsByTagName('input')[1];
        // var i = 0;
        // var j = 0;
        // function funAddNum(){           
        //     i ++ ;
        //     if(i == 100){
        //         j ++;
        //         i = 0;
        //     }
        //     if (j == 3){
        //         clearInterval(timeer);
        //     }
        //     secondsValue.value = i;
        //     minutesValue.value = j;
        // }
        // var timeer = setInterval(funAddNum, 100);

        
        
        // function returnNowDate(){
        //     var year = new Date().getFullYear();//2018
        //     var month = new Date().getMonth() + 1;//9
        //     var date = new Date().getDate();//17
        //     var hours = new Date().getHours();//15
        //     var minutes = new Date().getMinutes();//46
        //     var seconds = new Date().getSeconds();//2
        //     var nowTime = `今天是 ${ year }年 ${ month }月 ${ date }号 ${ hours }时 ${ minutes }分 ${ seconds }秒。`;
        //     return nowTime;
        // }
        // var date = new Date();
        // date.setMinutes(20);
        // var i = 1;
        // setInterval(function(){
        //     if(date.getMinutes() == new Date().getMinutes()){
        //         console.log('daole' + i);
        //         i ++;
        //     }
        // },1000)
        
        // function nixu(dom){
        //     var domChildLen = dom.childElementCount;
        //     // Array.prototype.reverse.call(dom.children);
        //     for(let i = domChildLen -1 ; i >= 0; i --){
        //         var domCh = dom.children[i];
        //         dom.appendChild(domCh);
        //     }
        // }
        // var domDiv = document.getElementsByTagName('div')[0];
        // nixu(domDiv)
        // var span = document.getElementsByTagName('span')[0];
        // var cloSpan = span.cloneNode(true);
        // domDiv.appendChild(cloSpan);
        // span.innerText = 11111;



        // HTMLElement.prototype.insertAfter = function(domA, domB){
        //     var domBNextChild = domB.nextElementSibling;
        //     if(domBNextChild){
        //         this.insertBefore(domA, domBNextChild);
        //     }else{
        //         this.appendChild(domA);
        //     }
            
        // }
        // var span = document.createElement('span');
        // var ul = document.getElementsByTagName('ul')[0];
        // var li = document.getElementsByClassName('li')[0];
        // ul.insertAfter(span, li);



        // var domP = document.createElement('p');
        // var textNode = document.createTextNode('helloworld');
        // var domDiv = document.createElement('div');
        // domP.appendChild(textNode);
        // domDiv.appendChild(domP);
        // document.body.appendChild(domDiv);
        // domDiv.setAttribute('class','example');
        // domP.setAttribute('class','solgan');    
        // var domDiv = document.getElementsByTagName('div')[0];
        // var domDivSon = document.getElementsByTagName('div')[1];
        // var domH1 = document.getElementsByTagName('h1')[0];
        // var TagNameAll = document.getElementsByTagName('*');
        // var TagNameAllLen = TagNameAll.length;
        // for(let i = 0; i < TagNameAllLen; i ++){
        //     TagNameAll[i].setAttribute('node-name',TagNameAll[i].nodeName.toLowerCase());
        // }
        // domDiv.removeChild(domDivSon);
        // domH1.remove();
        // var tex = domH1.innerText;
        // var htm = domH1.innerHTML;
        // console.log(tex);

       
        
        
        // var ddom = document.getElementsByTagName('div')[0].getElementsByTagName('div')[0].children;
        // console.log(ddom)
        // HTMLElement.prototype.blDom = function(j = 0){
        //     var ch = this.children;
        //     for(let i = 0; i < ch.length; i ++){
        //         console.log(`${ j } : ${ ch[i].nodeName }`);
        //         if(ch[i].childElementCount !== 0){
        //             ch[i].blDom(j+1);
        //         }               
        //     }
        // }
        // var domDiv = document.getElementsByTagName('div')[0];
        // domDiv.blDom();

        // var retParEle = function(ele, i){
        //     for(let j = 0; j < i; j ++){
        //         ele = ele.parentElement;
        //     }
        //     return ele.nodeName;
        // }
        // var demoDom = document.getElementsByTagName('a')[0];
        // console.log(retParEle(demoDom, 3));

        // function sibEle(e, n){
        //     function nexSibEle(){
        //         for(let i = 0; i < n; i ++){
        //             if(e !== null){
        //                 e = e.nextElementSibling;
        //             }                   
        //         }
        //         return e;
        //     }
        //     function preSibEle(){
        //         n = Math.abs(n);
        //         for(let i = 0; i < n; i ++){
        //             if(e !== null){
        //                 e = e.previousElementSibling;
        //             }                  
        //         }
        //         return e;
        //     }
        //     return (n >= 0) ? nexSibEle() : preSibEle();
        // }    
        // var demoDom = document.getElementsByTagName('h2')[0];
        
    </script>
</body>
</html>